<!-- 
  @name: 售后详情
  @date: 2020.4.3
 -->
<template>
	<view class="content">
		<view class="cardview">
			<view class="item t1"><view class="left">设备出厂编码</view><view>{{info.macCode}}</view></view>
			<view class="item"><view class="left">设备型号</view><view>{{info.macType}}</view></view>
			<view class="item"><view class="left">生产日期</view><view>{{info.macTime}}</view></view>
			<view class="item"><view class="left">维修人员</view><view>{{info.repairName}}</view></view>
			<view class="item"><view class="left">维修日期</view><view>{{info.repairTime}}</view></view>
			<view class="item t2">
				<view class="left">更换配件</view>
				<view>
					<view class="partsInfo" v-for="(it, ix) in info.partsInfo" :key="ix">
						<view class="top" :class="ix === 0 ? 't1' : ''">{{it.partsName}}</view>
						<view class="btm">
							<text class="icon">￥</text>
							<text class="price">{{it.partsprice}}</text>
							<text v-text="it.feeType === 0 ? '三包' : '收费'"></text>
						</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="left">其他费用</view>
				<view><text class="icon">￥</text>{{info.otherPrice}}</view>
			</view>
			<view class="item"><view class="left">尿素液损耗(kg)</view><view>{{info.ureaLoss}}</view></view>
		</view>
		
		<view class="cardview">
			<view class="title">现场照片</view>
			<view class="item2">
				<image
					class="i"
					v-for="(item, index) in imgList"
					:key="index"
					:src="item"
					@tap="showImg(index)"></image>
			</view>
			<view class="title t2">备注</view>
			<view class="note">{{info.repairDesc}}</view>
		</view>
		
		<!-- 轮播图-start -->
		<view class="_popup" v-if="swiperShow" @tap="swiperShow = false">
			<view class="close"></view>
		</view>
		<swiper
			class="swiper"
			v-if="swiperShow"
			indicator-dots="true"
			circular="true"
			indicator-color="rgba(255,255,255,.5)"
			indicator-active-color="rgba(255,255,255,1)"
			previous-margin="65rpx"
			next-margin="35rpx"
			:current="swiperCurrent"
			:style="{height: swiperHeight}"
			@change="swiperChange">
			<swiper-item v-for="(item, index) in imgList" :key="index">
				<image
					class="img"
					:src="item"
					:style="{height: swiperCurrent === index ? swiperImgHeight : swiperImgHeight2,
							 marginTop: swiperCurrent === index ? '0' : '28rpx'}"
				></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图-end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				repairId: '',  //记录id
				info: {},  //信息
				imgList: [],  //现场照片
				swiperShow: false,  //是否显示图片轮播
				swiper_height: 0,  //轮播图高度(rpx)
				swiperCurrent: 0,  //轮播图位置
			}
		},
		computed: {
		    swiperHeight() {
		        return this.swiper_height + 'rpx';
		    },
		    swiperImgHeight() {
		        return (this.swiper_height - 70) + 'rpx';
		    },
		    swiperImgHeight2() {
		        return (this.swiper_height - 126) + 'rpx';
		    }
		},
		onLoad(e) {
			this.repairId = e.repairId;
			this.getInfo();
			this.getSwiperHeight();
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.getInfo();
				this.$store.commit('hasLogin');
			}
		},
		methods: {
			//轮播图滑动
			swiperChange(e) {
				this.swiperCurrent = e.detail.current;
			},
			//计算轮播区域高度
			getSwiperHeight() {
				let sys = uni.getSystemInfoSync();
				let windowHeight = 750 / sys.windowWidth * sys.windowHeight;  //屏幕可视区域高度转为rpx
				this.swiper_height = windowHeight - 200;
			},
			//点击图片
			showImg(index) {
				this.swiperShow = true;
				this.swiperCurrent = index;
			},
			//获取信息
			getInfo() {
				this.$http({
					url: this.$api.factoryUrl + 'getrepairdetail',
					data: {
						repairId: this.repairId
					}
				}).then(res => {
					this.info  = res;
					this.info.partsInfo = res.partsInfo ? JSON.parse(res.partsInfo) : [];
					this.imgList = res.scenePhoto.split(',');
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		align-items: center;
		padding-bottom: $spacing-col;
	}
	
	/* 卡片 */
	.cardview {
		width: 730rpx;
		padding: 40rpx 30rpx;
		margin-top: $spacing-col;
		border-radius: $border-radius-bm;
		background-color: $color-white;
		.title {
			width: 100%;
		}
		.title.t2 {
			margin-top: 60rpx;
		}
		.icon {
			font-size: 22rpx;
		}
		.note {
			width: 100%;
			margin-top: 34rpx;
			font-size: 24rpx;
			color: $color-grey;
			line-height: 40rpx;
		}
		.item {
			width: 100%;
			margin-top: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				flex: 1;
				margin-left: 30rpx;
				color: $color-grey;
			}
		}
		.item.t1 {
			margin-top: 0;
		}
		.item.t2 {
			align-items: flex-start;
			margin-bottom: 20rpx;
		}
		.item2 {
			width: 100%;
			margin-top: 30rpx;
			.i {
				width: 130rpx;
				height: 130rpx;
				margin-top: 10rpx;
				margin-right: 20rpx;
			}
		}
		.item .partsInfo {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.top,
			.btm {
				margin-top: 40rpx;
				font-size: 24rpx;
			}
			.top.t1 {
				margin-top: 0;
			}
			.btm {
				.icon {
					font-size: 22rpx;
				}
				.price {
					margin-right: 20rpx;
					font-size: $font-size;
					font-family: $font-family-num;
				}
			}
		}
	}
	
	/* 轮播图 */
	._popup {
		.close {
			position: fixed;
			top: 40rpx;
			right: 30rpx;
			width: 37rpx;
			height: 37rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/3F/rBCky14UAFGAbG47AAACr5SBkYk079.png');
		}
	}
	.swiper {
		position: fixed;
		top: 110rpx;
		width: 750rpx;
		z-index: $z-index-popup-info;
		.img {
			width: 620rpx;
			border-radius: $border-radius-bm;
			transition: all 0.1s ease-in 0s;
		}
	}
</style>
